<template>
<div class="home">
    <div>
        <h3>全局数据</h3>   
        <p>{{ $store.state.a }}</p>
        <button @click="$store.commit('addA',10)">addA</button>
        <button @click="$store.state.a++">addA</button>
        <p>{{ $store.state.b }}</p>
        <button @click="$store.commit('addB',2)">addB</button>
    </div>

    <div>
        <h3>模块内的数据---手动调用版</h3>
        <p>{{ $store.state.demo.x }}</p>
        <p>{{ $store.getters["demo/doubleX"] }}</p>
        <p>{{ $store.getters["demo/tripleX"] }}</p>
        <button @click="$store.commit('demo/addX',10)">addX</button>
        <button @click="$store.dispatch('demo/addXAsync',10)">addXAsync</button>
    </div>
    <div>
        <h3>模块内的数据---映射版</h3>
        <p>{{ x }}</p>
        <p>{{ doubleX }}</p>
        <p>{{ tripleX }}</p>
        <button @click="addX()">addX</button>
        <button @click="addXAsync()">addXAsync</button>
        <button @click="addXYiBu()">addXYiBu</button>
    </div>
    <div>
        <h3>子模块和根木块访问</h3>
        <p>x:{{ x }}</p>
        <p>a:{{ a }}</p>
        <p>a+x:{{ xAddA }}</p>
        <button @click="addXAndA(1)">addXAndA</button>
    </div>


</div>
</template>

<script>
// @ is an alias to /src

import {mapState,mapGetters,mapMutations,mapActions} from "vuex";





export default {
    name: 'HomeView',
    methods:{
        ...mapMutations("demo",["addX"]),
        ...mapActions("demo",["addXAsync","addXAndA"]),
        ...mapActions(["addXYiBu"]),
    },
    computed:{
        ...mapState(["a","b"]),  //根store的state
        ...mapState("demo",["x"]),  // 根store下的demo中state
        ...mapGetters("demo",["doubleX","tripleX","xAddA"]),  // 根store下的demo中getters
    },
    mounted(){
        console.log(this);
        console.log(this.$store);
    }
}
</script>
